<template>
    <div class="work">
        <p>工作流名称：<br>
            <el-input v-model="name" placeholder="工作流名称" style="width: 180px"/>
        </p>
        <div v-for="(inputSet, index) in inputSets" :key="index">
            <p>字段配置：<br>
                <el-input v-model="inputSet.fieldName" placeholder="字段名" style="width: 180px"/><br>
                <el-select v-model="inputSet.fieldType" placeholder="字段类型" style="width:180px;">
                    <el-option value="str">字符串</el-option>
                    <el-option value="int">数字</el-option>
                    <el-option value="date">日期</el-option>
                    <el-option value="checkbox">复选框</el-option>
                    <el-option value="radio">单选按钮</el-option>
                    <el-option value="select">下拉列表</el-option>
                </el-select><br>
                <el-input v-model="inputSet.fieldValue" placeholder="字段值" style="width: 180px"/>
            </p>
            <p>是否可用：
                <el-radio-group v-model="radio">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="2" size="large">否</el-radio>
                </el-radio-group>
            </p>

        </div>
        <el-button @click="addInputSet">+</el-button>
        <el-button @click="submitData">确定</el-button>
    </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';
const router = useRouter();

const radio = ref('1')
  

// 存储输入框组数据的数组，每个元素是一个包含字段名和字段类型的对象
const name = ref('')
let inputSets = ref([{ fieldName: '', fieldType: '',fieldValue: '' }]);

// 新增一组输入框的方法
const addInputSet = () => {
    inputSets.value.push({ fieldName: '', fieldType: '',fieldValue: '' });
};

// 提交数据的方法，将所有字段名和字段类型组装成JSON
const submitData = () => {
    const dataToSubmit = inputSets.value.map(inputSet => ({
        fieldName: inputSet.fieldName,
        fieldType: inputSet.fieldType,
        fieldValue: inputSet.fieldValue
    }));
    const params = JSON.stringify(dataToSubmit)
    console.log(JSON.stringify(dataToSubmit));
    http.post("work/",{"name":name.value,"params":params,"status":radio.value}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/work')
        }else{
            ElMessage.error(res.data.msg)
        }
    })
// 这里可以将JSON.stringify(dataToSubmit) 的结果发送到后端等操作
};
</script>

<style scoped>
.work {
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    margin-left: 120px;
}

button{
    margin-top: 10px;
    width: 50px;
}

</style>

